<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  年: <input type="text" id="year">
  月: <input type="text" id="month">
  日: <input type="text" id="day">
  <button id="btn">判断</button>
  <input type="text" id="result">
  <script>
    // 1.  年月日的输入判断
    // 需求:分别在年月日对应的输入框中输入对应的年月日,点击按钮判断,年月日输入是否合法,并将结果输出到结果框

    // 要求:
    // 年份: 1000-9999的整数
    // 月份: 1-12的整数
    // 日期:
    // 1 3 5 7 8 10 12   => 31(大月)
    // 4 6 9 11          => 30(小月)
    // 2   => 平年二月28  闰年2月29

    // 1. 获取元素
    var yearInp = document.querySelector(' #year');
    var monthInp = document.querySelector(' #month');
    var dayInp = document.querySelector(' #day');
    var btn = document.querySelector(' #btn');
    var resultInp = document.querySelector(' #result');
    // 2. 绑定点击事件(点击事件在页面加载时不执行,点击时才执行)  =>  点击按钮的时候 进行判断
    btn.onclick = function () {
      // 3. 点击取值
      var year = yearInp.value;
      var month = monthInp.value;
      var day = dayInp.value;
      // 4. 判断年份
      if (year >= 1000 && year <= 9999 && year % 1 == 0) {
        console.log('year ok');
        // 5. 判断月份   => 年份正确的前提下
        if (month >= 1 && month <= 12 && month % 1 == 0) {
          console.log('month ok');
          // 6. 日期判断  => 年份正确 月份也正确 => 获取对应月份的最大值
          // var count = 0;
          // if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
          //   count = 31;
          // } else if (month == 4 || month == 6 || month == 9 || month == 11) {
          //   count = 30;
          // } else {// 2月
          //   // 平年二月28(1-28)  闰年2月29(1-29)
          //   if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { // 闰年
          //     count = 29;
          //   } else { //平年
          //     count = 28;
          //   }

          // }
          var count = null;
          switch (month * 1) {
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
              console.log('大月');
              count = 31;
              break;
            case 4:
            case 6:
            case 9:
            case 11:
              console.log('小月');
              count = 30;
              break;
            case 2:
              if (year % 100 != 0 && year % 4 == 0 || year % 400 == 0) {
                count = 29;
              } else {
                count = 28;
              }
              break;
          }
          // 7. 判断对应的月份 日期是否在有效范围之间
          if (day >= 1 && day <= count && day % 1 == 0) {
            resultInp.value = year + '年' + month + '月' + day + '号';
          } else {
            resultInp.value = "请输入正确范围的日期";
          }
        } else {
          resultInp.value = '请输入1-12的月份'
        }
      } else {
        resultInp.value = '请输入1000-9999的年份'
      }

    }

    // 2.    年月日输入计算  (n = 前n-1月之和 + 当前月的几号)
    // 需求: 年月日输入合法的前提下  判断输入的日期 是该年的第多少天?

    // 2021 - 3 - 1   => 31 + (28 | 29) + 1
    // 2021 - 8 - 9   => 31 + (28 | 29) + 31 + 30 + 31 + 30 + 31 + 9

    // var yearInp = document.querySelector(' #year');
    // var monthInp = document.querySelector(' #month');
    // var dayInp = document.querySelector(' #day');
    // var btn = document.querySelector(' #btn');
    // var resultInp = document.querySelector(' #result');
    // btn.onclick = function () {
    //   var year = yearInp.value;
    //   var month = monthInp.value;
    //   var day = dayInp.value;

    //   if (year >= 1000 && year <= 9999 && year % 1 == 0) {
    //     console.log('yes ok');
    //     var run;
    //     if (year % 100 != 0 && year % 4 == 0 || year % 400 == 0) {
    //       run = true;
    //       // console.log(1)
    //     } else {
    //       run = false;
    //     }
    //     var count = 0;
    //     for (i = 0; i < month; i++) {
    //       switch (i) {
    //         case 1:
    //         case 3:
    //         case 5:
    //         case 7:
    //         case 8:
    //         case 10:
    //         case 12:
    //           count += 31;
    //           break;
    //         case 4:
    //         case 6:
    //         case 9:
    //         case 11:
    //           count += 30;
    //           break;
    //         case 2:
    //           if (run) {
    //             count += 29;
    //           } else {
    //             count += 28;
    //           }
    //           break;
    //       }
    //     }
    //     count += Number(day);
    //     console.log("今天是今年的第" + count + "天");
    //     resultInp.value = "今天是今年的第" + count + "天";
    //   }

    // }


  </script>
</body>

</html>